<template>
  <view  class="u-padding-left-32 u-padding-right-32 u-margin-top-58">
    <a-nabbar :name="`添加银行卡账号`" />
    <view class="pay text-white ">

      <view class="money" id="money">
        <view class="u-flex payname u-row-between ">
          <view class="text-white u-font-34 ">持卡人：</view>
          <view  class=" u-position-relative">
            <u-input v-model="form.name"  :border="false" input-align="right" :clearable="false" placeholder="请输入持卡人姓名" placeholder-style="color:#B0B2D8"/>
          </view>
        </view>
        <view class="input"></view>
        <view class="u-flex payname u-row-between ">
          <view class="text-white u-font-34 ">账号：</view>
          <view  class=" u-position-relative">
            <u-input v-model="form.code"  :border="false" input-align="right" :clearable="false" placeholder="请输入卡号" placeholder-style="color:#B0B2D8"/>
          </view>
        </view>
        <view class="input"></view>
        <view class="u-flex payname u-row-between ">
          <view class="text-white u-font-34 ">卡类型：</view>
          <view  class=" u-position-relative" @click="select = true">
            <view class="u-flex cardSe">
              <text v-if="form.cardName">{{form.cardName}}</text>
              <text v-else>请选择卡类型</text>
              <u-icon name="gengduopsd" custom-prefix="custom-icon" color="#dedede" size="20" ></u-icon>
            </view>
            <u-select v-model="select" :list="list" @confirm="confirm"></u-select>
          </view>
        </view>
        <view class="input"></view>
        <view class="u-flex payname u-row-between ">
          <view class="text-white u-font-34 ">手机号：</view>
          <view  class=" u-position-relative">
            <u-input v-model="form.phone"  maxlength="11" :border="false" input-align="right" :clearable="false" placeholder="请输入本卡绑定手机号" placeholder-style="color:#B0B2D8"/>
          </view>
        </view>
      </view>
    </view>
	<fixed-team btnText="确定" @btnClick="submitPay"></fixed-team>
  </view>
</template>

<script>
export default {
  name: "payMoney",
  data(){
    return{
      name:'',
      select:false,
      form:{
        cardName:"",
        show:false
      },
      list: [
        {
          value: '1',
          label: '江'
        },
        {
          value: '2',
          label: '湖'
        }
      ],
    }
  },
  computed:{

  },
  onLoad: function (option) {
    this.name = option.name
  },
  methods:{
    confirm(e){
      this.form.cardName = e[0].label
    },
// 添加账户
    submitPay(){
      this.$u.route({type:'back'})
      if(!this.form.name){
        this.$u.toast('请输入持卡人姓名')
        return false
      }
      if(!this.form.code){
        this.$u.toast('请输入银行卡号')
        return false
      }
      if(!this.form.cardName){
        this.$u.toast('请选择卡类型')
        return false
      }
      if(!this.form.phone){
        this.$u.toast('请输入手机号')
        return false
      }
      if(!this.$u.test.mobile(this.form.phone)){
        this.$u.toast('手机号码不正确')
        return false;
      }
    },
  }

}
</script>
<style lang="scss">
#money .u-flex .u-input{
  background: #1f1b34;
  margin-right: 48rpx;
}
</style>
<style scoped lang="scss">
.card {
  .text{
    color: #808080;
    padding: 28rpx;
  }
}
.money{
  width: 100%;
  min-height: 201rpx;
  background: #1F1B34 ;
  border-radius: 26rpx;
  box-sizing: border-box;
  padding-left: 48rpx;
  .payname{
    height: 100rpx;
  }
  .input{
    height: 1px;
    background: #FFFFFF;
    opacity: 0.1;
    width: 100%;
  }
}
.cardSe{
  margin-right: 48rpx;
  span{
    margin-right: 33rpx;
  }
}
</style>